<template>
    <div class="quick-section">
      <h3 class="section-title">快捷入口</h3>
      
      <div class="quick-grid">
        <el-card 
          v-for="item in quickItems" 
          :key="item.id" 
          shadow="hover" 
          class="quick-item"
          @click="$emit('quick-click', item)"
        >
          <div class="quick-icon" :style="{ backgroundColor: item.bgColor }">
            <el-icon :size="24"><component :is="item.icon" /></el-icon>
          </div>
          <div class="quick-label">{{ item.label }}</div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import {
    ShoppingCart,
    Message,
    Edit,
    Tools,
    User
  } from '@element-plus/icons-vue'
  
  defineEmits(['quick-click'])
  
  const quickItems = [
    { id: 1, label: '我的购物车', icon: ShoppingCart, bgColor: '#ff9500', route: '/cart' },
    { id: 2, label: '我的消息', icon: Message, bgColor: '#4a90e2', route: '/messages' },
    { id: 3, label: '我的评价', icon: Edit, bgColor: '#4caf50', route: '/reviews' },
    { id: 4, label: '售后服务', icon: Tools, bgColor: '#9c27b0', route: '/service' },
    { id: 5, label: '我的足迹', icon: History, bgColor: '#607d8b', route: '/history' },
    { id: 6, label: '邀请好友', icon: User, bgColor: '#ff5722', route: '/invite' }
  ]
  </script>
  
  <style scoped>
  .quick-section {
    padding: 20px;
  }
  
  .section-title {
    margin: 0 0 20px;
    color: #333;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .quick-item {
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .quick-item:hover {
    transform: translateY(-5px);
  }
  
  .quick-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: white;
  }
  
  .quick-label {
    text-align: center;
    font-size: 14px;
    color: #666;
  }
  </style>